<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 
            在使用项目级开发的时候，尽量减少 DOM 的操作
            ref： 可以用来获取 DOM 元素，也可以获取组件
         -->
        <input type="text" ref="myinput">

        <ul>
            <li v-for="item in list" :ref="item" :key="item">{{item}}</li>
        </ul>




        <!-- ref 属性也可以指定是一个函数，该函数中有一个参数就是这个 DOM -->
        <div :ref="refFn"> 你好世界 </div>

        <!-- 
            ref: 
            ref 可以用来标记一个或者多个元素，目的是方便我们操作 DOM 元素
            ref 也可以添加在组件上，可以获取到对应组件实例 
         -->
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {
                list: ['q', 'w', 'e', 'r']
            }
        },
        mounted () {
            // console.log(document.querySelector('input'));
            // 如果说在 vue 中需要使用到 DOM 可以给其添加一个 ref 属性，在事件
            // 或者钩子函数中通过 this.$refs 来进行获取
            console.log(this.$refs);
            setTimeout(() => {
                this.$refs.myinput.focus()
            }, 3000)
        },
        methods: {
            refFn (val) {
                // val 就是 DOM 元素
                console.log(val);
            }
        },
    })
    app.mount('#app')
</script>

</html>